<!DOCTYPE html>
<html class="x-admin-sm">

<head>
    <meta charset="UTF-8">
    <title>欢迎页面-X-admin2.2</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <link href="../css/common.css" type="text/css" rel="stylesheet">
    <link href="../css/index2.css" type="text/css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/layui.css">
    <script type="text/javascript" src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="../js/common/ajaxcommon.js"></script>
    <script src="../js/img/jquery-1.8.3.min.js"></script>
    <script src="../js/common/jquery.form.js"></script>
    <script src="../js/img/imgUp.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        .layui-form-item {
            padding: 10px 15px;
        }

        .layui-input-inline {
            width: 24% !important;
        }

        .layui-input-inline input {
            float: right;
        }

        .layui-input {
            width: 65% !important;
        }

        .layui-form-label {
            width: 30% !important;
            padding: 0;
            margin-top: 5px;
        }

        @media (max-width: 896px) {
            .layui-input {
                width: 55% !important;
            }

            .layui-input-inline {
                margin-top: 15px;
                width: 30% !important;
            }

            .layui-form-label {
                float: left;
                width: 35% !important;
            }
        }

        @media (min-width: 499px) {
            .layui-input-inline {
                width: 85% !important;
            }
        }

        @media (min-width: 625px) {
            .layui-input-inline {
                width: 85% !important;
            }
        }

        @media (min-width: 896px) {
            .layui-input {
                width: 55% !important;
            }

            .layui-input-inline {
                margin-top: 15px;
                width: 30% !important;
            }

            .layui-form-label {
                float: left;
                width: 35% !important;
            }
        }

        .text-position {
            position: absolute;
            left: -90px;
            top: 40px;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <form class="layui-form" id="user">
            <div class="layui-form-item">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
                    <legend>提单</legend>
                </fieldset>
                <div class="layui-colla-item" id="userInfo">
                    <h2 class="layui-colla-title">业务类型</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <div class="layui-input-block" style="width: 500px; margin-left: 150px !important;">
                                    <label><input type="radio" name="payType" value="1" title="非交易类型" checked="true"
                                    ></label>
                                    <label><input type="radio" name="payType" value="2" id="deal"
                                                  title="交易类型"/></label>
                                    <!--<input type="radio" name="gender" value="过桥类型" title="过桥类型">-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item" id="userInfo1">
                    <h2 class="layui-colla-title">用户基本信息</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">
                            <div class="layui-input-inline">
                                <labe class="layui-form-label">
                                    <span class="x-red">*</span>客户姓名
                                </labe>
                                <input type="text" id="userName" name="userName" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>身份证</label>
                                <input type="text" id="3" name="identity" required="" lay-verify="required|identity"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>手机号码</label>
                                <input type="text" id="1" name="phone" required="" lay-verify="required|phone"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>请选择</label>
                                <div class="layui-input-block"
                                     style="width: 300px; margin-left: 240px !important; margin-top: -5px !important;">
                                    <label> <input type="radio" title="未婚" name="maritalStatus" value="0"
                                                   checked></label>
                                    <label> <input type="radio" title="丧偶" name="maritalStatus" value="1"></label>
                                    <label> <input type="radio" title="已婚" name="maritalStatus" value="2"></label>
                                </div>
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>配偶姓名</label>
                                <input type="text" id="spouseName" name="spouseName"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>配偶身份证</label>
                                <input type="text" id="spouseIdentity" name="spouseIdentity"
                                       autocomplete="off" class="layui-input"></div>
                        </div>

                    </div>
                </div>
                <div class="layui-colla-item" id="userInfo2">
                    <h2 class="layui-colla-title">借款信息</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>借款金额</label>
                                <input type="text" id="movieid2" name="amount" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>借款天数</label>
                                <input type="text" id="movieid3" name="amountDays" required="" lay-verify="required"
                                       autocomplete="off"  class="layui-input">
                            </div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>预计出款时间</label>
                                <input type="text" id="moiveName2" name="paragraphTime" required=""
                                       lay-verify="required|date"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>收费方式</label>
                                <div class="layui-input-block"
                                     style="width: 300px; margin-left: 240px !important; margin-top: -5px !important;">
                                    <input type="radio" title="费用前置" name="feeWay" value="0" checked>
                                    <input type="radio" title="费用后置" name="feeWay" value="1">
                                </div>
                            </div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>费率</label>
                                <input type="text" id="moiveName4" name="rate" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>收费金额</label>
                                <input type="text" id="moiveName5" name="brokerage" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                        </div>
                    </div>

                </div>
                <div class="layui-colla-item" id="userInfo3">
                    <h2 class="layui-colla-title">总负债金额</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>总负债金额</label>
                                <input type="text" id="movieid4" name="totalAmount"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>赎楼成数</label>
                                <input type="text" id="moiveName7" name="foreclosure"
                                       autocomplete="off" class="layui-input">
                            </div>

                        </div>
                    </div>
                </div>
                <div class="layui-colla-item" id="userInfo4">
                    <h2 class="layui-colla-title">房产信息</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>房产名称</label>
                                <input type="text" id="t" name="houseName" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>面积（m^2）</label>
                                <input type="text" id="name" name="area" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>房产所在地</label>
                                <input type="text" id="q" name="address" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>房产评估</label>
                                <input type="text" id="w" name="assessment" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>产权人姓名</label>
                                <input type="text" id="e" name="ownerName" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item" id="userInfo5">
                    <h2 class="layui-colla-title">原代银行</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">

                            <div class="layui-input-inline">
                                <label for="ei" class="layui-form-label">
                                    <span class="x-red">*</span>原贷款银行</label>
                                <input type="text" id="ei" name="originalBank" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>原贷款金额</label>
                                <input type="text" id="x" name="originalAmount" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>原贷款余额</label>
                                <input type="text" id="a" name="amountBlance" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>新贷款银行</label>
                                <input type="text" id="v" name="newBank" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>新贷款金额</label>
                                <input type="text" id="o" name="newAmount"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>客户经理姓名</label>
                                <input type="text" id="u" name="managerName" required="" lay-verify="required"
                                       autocomplete="off" class="layui-input"></div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>客户经理手机号码</label>
                                <input type="text" id="i" name="managerPhone" required="" lay-verify="required|number"
                                       autocomplete="off" class="layui-input"></div>
                        </div>

                    </div>
                </div>
                <div class="layui-colla-item" id="userInfo6">
                    <!--<h2 class="layui-colla-title">交易类型</h2>
                    <div class="layui-colla-content layui-show">
                        <div class="layui-form-item">

                            <div class="layui-input-inline">
                                <label for="dealPrice" class="layui-form-label">
                                    <span class="x-red">*</span>成交价格</label>
                                <input id="dealPrice" type="text" name="dealPrice"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>定金金额</label>
                                <input type="text" name="orderAmount"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>监管金额</label>
                                <input type="text" name="superviseAmount"
                                       autocomplete="off" class="layui-input">
                            </div>

                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>买家姓名</label>
                                <input type="text" name="buyerName"
                                       autocomplete="off" class="layui-input"></div>
                            <div class="layui-input-inline">
                                <label class="layui-form-label">
                                    <span class="x-red">*</span>买家身份证号码</label>
                                <input type="text" name="buyerIdentity"
                                       autocomplete="off" class="layui-input"></div>
                        </div>
                    </div>-->
                </div>

                <div class="layui-colla-item" id="userInfo7">
                    <h2 class="layui-colla-title">民间借贷情况</h2>
                    <div class="layui-colla-content layui-show">
                        <div style="position: relative;" class="layui-input-block">
                            <label class="text-position">普通文本域</label>
                            <textarea placeholder="请输入内容" name="privateLending" class="layui-textarea"></textarea>
                        </div>

                        <div class="layui-input-block" style="margin-top: 2em;">
                            <label class="text-position">诉讼情况</label>

                            <textarea placeholder="请输入内容" name="lawsuitCase" class="layui-textarea"></textarea>
                        </div>
                    </div>
                </div>
                <div class="layui-colla-item" id="userInfo8">
                    <h2 class="layui-colla-title">上传图片</h2>
                    <div>
                        <div class="img-box full">
                            <section class=" img-section">
                                <p class="up-p">上传图片：<span class="up-span">最多可以上传5张图片，马上上传</span></p>
                                <h1>客户资料</h1>
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="../images/img/a11.png" class="add-img">
                                        <input type="file" name="file" id="file1" class="file" value=""
                                               accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                                    </section>
                                </div>
                                <h1>房产资料</h1>
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="../images/img/a11.png" class="add-img">
                                        <input type="file" name="file" id="file2" class="file" value=""
                                               accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                                    </section>
                                </div>
                                <h1>银行资料</h1>
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="../images/img/a11.png" class="add-img">
                                        <input type="file" name="file" id="file3" class="file" value=""
                                               accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                                    </section>
                                </div>
                                <h1>账户资料</h1>
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="../images/img/a11.png" class="add-img">
                                        <input type="file" name="file" id="file4" class="file" value=""
                                               accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                                    </section>
                                </div>
                                <h1>面签资料</h1>
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="../images/img/a11.png" class="add-img">
                                        <input type="file" name="file" id="file5" class="file" value=""
                                               accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                                    </section>
                                </div>
                                <h1>其他</h1>
                                <div class="z_photo upimg-div clear">
                                    <section class="z_file fl">
                                        <img src="../images/img/a11.png" class="add-img">
                                        <input type="file" name="file" id="file6" class="file" value=""
                                               accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
                                    </section>
                                </div>
                            </section>
                        </div>
                        <aside class="mask works-mask" id="imgAside">
                            <div class="mask-content">
                                <p class="del-p">您确定要删除作品图片吗？</p>
                                <p class="check-p"><span class="del-com wsdel-ok" id="ImgOk">确定</span><span
                                        class="wsdel-no" id="ImgCenal">取消</span></p>
                            </div>
                        </aside>

                        <aside class="mask works-mask" id="submitAside">
                            <div class="mask-content">
                                <p class="del-p">您确定要提交吗？</p>
                                <p class="check-p">
                                    <span class="del-com wsdel-ok" id="submitOk">确定</span><span
                                        class="wsdel-no" id="submitCancel">取消</span></p>
                            </div>
                        </aside>

                        <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
                        </div>
                    </div>
                </div>
                <div>
                    <button type="button" class="layui-btn layui-btn-lg" id="add" lay-submit lay-filter="*"
                            style="margin-left: 150px; margin-right: 50px ;margin-top: -40px">
                        添加
                    </button>
                    <button type="button" class="layui-btn layui-btn-lg" style="margin-top: -40px">退出</button>
                </div>
                <input type="text" name="salesmanId" hidden>
            </div>
        </form>
    </div>
</div>

<script>
    /* layui.use(['form', 'layer'],
         function () {
             $ = layui.jquery;
             var form = layui.form,
                 layer = layui.layer;
         });

     function switchItem(tag) {
         if (tag == '非交易类型') {
             $("#userInfo6").hide()
         } else {
             $("#userInfo6").show()
         }
     }
     */
    var maritalStatus = $("input[name='maritalStatus']:checked").val();

    var form;
    var layer;
    layui.use(['form', 'layer', 'layedit', 'laydate'],
        function () {
            $ = layui.jquery;
            form = layui.form,
                layer = layui.layer;
        });

    role();

    function role() {
        //拿到浏览器存入的cookie
        var token = getCookie("token");
        //获取用户信息
        requestAjax("/background/login/getLoginInfo", {token: token}, function (data) {
            if (data.result) {
                var salesmanId = data.data.id;
                $("input[name='salesmanId']").val(salesmanId);
                console.log("salesmanId====>>>" + salesmanId);
            } else {
                alert("获取数据失败！")
            }
        })
    }


    if (maritalStatus == 0) {
        //禁用文本框
        $("#spouseName").attr("disabled", true);
        $("#spouseIdentity").attr("disabled", true);
        //清除正则
        $("#spouseName").attr("lay-verify", "");
        $("#spouseIdentity").attr("lay-verify", "");
        //设置文本框为空
        $("[name='spouseName']").val("");//配偶姓名
        $("[name='spouseIdentity']").val("");//配偶身份证号码
    } else if (maritalStatus == 1) {
        $("#spouseName").attr("disabled", true);
        $("#spouseIdentity").attr("disabled", true);
        $("#spouseName").attr("lay-verify", "");
        $("#spouseIdentity").attr("lay-verify", "");
        $("[name='spouseName']").val("");//配偶姓名
        $("[name='spouseIdentity']").val("");//配偶身份证号码
    } else if (maritalStatus == 2) {
        $("#spouseName").removeAttr("disabled");
        $("#spouseIdentity").removeAttr("disabled");
        $("#spouseName").attr("lay-verify", "required");
        $("#spouseIdentity").attr("lay-verify", "required");
    }

    $("input[name='maritalStatus']").click(function () {
        var maritalStatus = $("input[name='maritalStatus']:checked").val();
        console.log("=======>>>>>>状态" + maritalStatus);
        if (maritalStatus == 0) {
            //禁用文本框
            $("#spouseName").attr("disabled", true);
            $("#spouseIdentity").attr("disabled", true);
            //清除正则
            $("#spouseName").attr("lay-verify", "");
            $("#spouseIdentity").attr("lay-verify", "");
            //设置文本框为空
            $("[name='spouseName']").val("");//配偶姓名
            $("[name='spouseIdentity']").val("");//配偶身份证号码
        } else if (maritalStatus == 1) {
            $("#spouseName").attr("disabled", true);
            $("#spouseIdentity").attr("disabled", true);
            $("#spouseName").attr("lay-verify", "");
            $("#spouseIdentity").attr("lay-verify", "");
            $("[name='spouseName']").val("");//配偶姓名
            $("[name='spouseIdentity']").val("");//配偶身份证号码
        } else if (maritalStatus == 2) {
            $("#spouseName").removeAttr("disabled");
            $("#spouseIdentity").removeAttr("disabled");
            $("#spouseName").attr("lay-verify", "required");
            $("#spouseIdentity").attr("lay-verify", "required");
        }
    })


   /* $("input[name='maritalStatus']").click(function () {
        var maritalStatus = $("input[name='maritalStatus']:checked").val();
        console.log("=======>>>>>>状态" + maritalStatus);
        if (maritalStatus == 2) {
            $("#spouseName").attr("lay-verify", "required");
            $("#spouseIdentity").attr("lay-verify", "required");
        } else {
            $("#spouseName").attr("lay-verify", "");
            $("#spouseIdentity").attr("lay-verify", "");
        }
    })*/

    /*function switchItem(tag) {
        if (tag == '非交易类型') {
            console.log(tag);
            $("#userInfo6").hide();
        } else {
            console.log(tag);
            $("#userInfo6").show();
        }
    }*/

    $("input[name='payType']").click(function () {
        var i = $("input[name='payType']:checked").val();
        console.log(i);
        if (i == 2) {
            var c = " <h2 class=\"layui-colla-title\">交易类型</h2>\n" +
                "                    <div class=\"layui-colla-content layui-show\">\n" +
                "                        <div class=\"layui-form-item\">\n" +
                "                            <div class=\"layui-input-inline\">\n" +
                "                                <label for=\"dealPrice\" class=\"layui-form-label\">\n" +
                "                                    <span class=\"x-red\">*</span>成交价格</label>\n" +
                "                                <input id=\"dealPrice\" required=\"\" lay-verify=\"required|number\" type=\"text\" name=\"dealPrice\"\n" +
                "                                       autocomplete=\"off\" class=\"layui-input\">\n" +
                "                            </div>\n" +
                "                            <div class=\"layui-input-inline\">\n" +
                "                                <label class=\"layui-form-label\">\n" +
                "                                    <span class=\"x-red\">*</span>定金金额</label>\n" +
                "                                <input type=\"text\" required=\"\" lay-verify=\"required|number\" name=\"orderAmount\"\n" +
                "                                       autocomplete=\"off\" class=\"layui-input\">\n" +
                "                            </div>\n" +
                "                            <div class=\"layui-input-inline\">\n" +
                "                                <label class=\"layui-form-label\">\n" +
                "                                    <span class=\"x-red\">*</span>监管金额</label>\n" +
                "                                <input type=\"text\" required=\"\" lay-verify=\"required|number\" name=\"superviseAmount\"\n" +
                "                                       autocomplete=\"off\" class=\"layui-input\">\n" +
                "                            </div>\n" +
                "                            <div class=\"layui-input-inline\">\n" +
                "                                <label class=\"layui-form-label\">\n" +
                "                                    <span class=\"x-red\">*</span>买家姓名</label>\n" +
                "                                <input type=\"text\" name=\"buyerName\"\n" +
                "                                       autocomplete=\"off\" required=\"\" lay-verify=\"required\" class=\"layui-input\"></div>\n" +
                "                            <div class=\"layui-input-inline\">\n" +
                "                                <label class=\"layui-form-label\">\n" +
                "                                    <span class=\"x-red\">*</span>买家身份证号码</label>\n" +
                "                                <input type=\"text\" name=\"buyerIdentity\"\n" +
                "                                       autocomplete=\"off\" required=\"\" lay-verify=\"required\" class=\"layui-input\"></div>\n" +
                "                        </div>\n" +
                "                    </div>";
            $("#userInfo6").append(c);
        } else {
            $("#userInfo6").html("");
        }
    })

</script>
</body>

</html>
